@extends('admin/common')

@section('content')
    <article class="page-container">
        <form class="form form-horizontal" id="form-admin-add">
            <input type="hidden" name="id" value="{{ isset($admin['id']) ? $admin['id'] : '' }}">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" placeholder="" id="name" name="name" value="{{ isset($admin['name']) ? $admin['name'] : '' }}">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>昵称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="{{ isset($admin['nickname']) ? $admin['nickname'] : '' }}" placeholder="" id="nickname" name="nickname">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>初始密码：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="password" class="input-text" autocomplete="off" value="" placeholder="密码" id="password" name="password">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="password" class="input-text" autocomplete="off"  placeholder="确认新密码" id="password2" name="password2">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"> 邮箱：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" placeholder="@" value="{{ isset($admin['email']) ? $admin['email'] : '' }}" name="email" id="email">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"> 头像：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <!--用来存放item-->
                    <div id="fileList" class="uploader-list"></div>
                    <div id="filePicker">选择图片</div>
                </div>
                <input type="hidden" name="avatar" id="avatar" value="{{ isset($admin['avatar']) ? $admin['avatar'] : '' }}">
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户角色：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select class="input-text role-select" multiple="multiple" name="admin_role[]">
                        @if(isset($role_list))
                                @foreach($role_list as $k=>$v)
                                    @if(isset($admin_role) && count($admin_role) > 0)
                                        @foreach($admin_role as $kk=>$vv)
                                            @if($vv->id == $v->id)
                                                <option value="{{ $v->id }}" selected="selected">{{ $v->name }}</option>
                                            @else
                                                <option value="{{ $v->id }}">{{ $v->name }}</option>
                                            @endif
                                        @endforeach
                                    @else
                                        <option value="{{ $v->id }}">{{ $v->name }}</option>
                                    @endif
                                 @endforeach
                         @endif
                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">备注：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea name="introduction" cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true" >
                        {{ isset($admin['avatar']) ? $admin['avatar'] : '' }}
                    </textarea>
                    <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                </div>
            </div>
        </form>
    </article>
    @endsection

@section('script')
    <script type="text/javascript" src="{{ asset('admin/lib/jquery.validation/1.14.0/jquery.validate.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/lib/jquery.validation/1.14.0/validate-methods.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/lib/jquery.validation/1.14.0/messages_zh.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/lib/webuploader/0.1.5/webuploader.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('admin/lib/webuploader/0.1.5/webuploader.css') }}">
    <script type="text/javascript" src="{{ asset('admin/lib/select2-4.0.2/js/select2.full.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('admin/lib/select2-4.0.2/css/select2.min.css') }}">
    <script type="text/javascript">
        $(function(){
            $('.skin-minimal input').iCheck({
                checkboxClass: 'icheckbox-blue',
                radioClass: 'iradio-blue',
                increaseArea: '20%'
            });

            //选择
            $(".role-select").select2();

            //图片上传
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: '{{ asset('admin/lib/webuploader/0.1.5/Uploader.swf') }}',
                // 文件接收服务端。
                server: '{{ URL::to('admin/admin/upload') }}',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }

            });
            // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
                var $li = $(
                                '<div id="' + file.id + '" class="file-item thumbnail">' +
                                '<img>' +
                                '<div class="info">' + file.name + '</div>' +
                                '</div>'
                        ),
                        $img = $li.find('img');

                // $list为容器jQuery实例
                $('#fileList').append( $li );

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, 100, 100 );
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress span');
                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo( $li )
                            .find('span');
                }
                $percent.css( 'width', percentage * 100 + '%' );
            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on( 'uploadSuccess', function( file, res ) {
                $( '#'+file.id ).addClass('upload-state-done');
                //把文件路径传到表单
                if(res.code == 1){
                    $('#avatar').val(res.file);
                }
            });
            // 文件上传失败，显示上传出错。
            uploader.on( 'uploadError', function( file ) {
                var $li = $( '#'+file.id ),
                        $error = $li.find('div.error');
                // 避免重复创建
                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }
                $error.text('上传失败');
            });
            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').remove();
            });

        //验证
        $("#form-admin-add").validate({
                rules:{
                    name : {
                        required:true,
                        minlength:3,
                        maxlength:16
                    },
                    password : {
                        required:true,
                    },
                    password2 : {
                        required:true,
                        equalTo: "#password"
                    }
                },
                onkeyup : false,
                focusCleanup : true,
                success : "valid",
                submitHandler:function(form){
                    $(form).ajaxSubmit({
                        type : 'post',
                        url : "{{ URL::to('admin/admin/addAdminPost') }}" ,
                        success : function(ret){
                            if(ret.code == 1){
                                layer.msg(ret.msg,{icon:1,time:1000},function(){
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.$('.btn-refresh').click();
                                    parent.layer.close(index);
                                });
                            }else{
                                layer.msg(ret.msg,{icon:1,time:1000});
                            }
                        },
                        error : function(XmlHttpRequest, textStatus, errorThrown){
                            layer.msg('error!',{icon:1,time:1000,shift: -1});
                        }
                    });
                }
            });
        });
    </script>
@endsection
